<template>
  <section class="xm-content home_addEdit">
    <el-form ref="form"
      v-loading="box_loading"
      :model="form" :rules="rules"
      label-width="100px" inline-message>
      <div class="item_wrap">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" clearable/>
        </el-form-item>
      </div>
      <div class="item_wrap">
        <div>
          <div class="margintb20">产品属性</div>
          <el-transfer
              v-model="form.attributeIds"
              :titles="['可选择', '已选择']"
              :data="attributesList"
          >
              <span slot-scope="{ option }">
                <span style="width:8px;height: 14px;display: inline-block;border: 1px solid #ccc;"
                      :style="{background:option.color}"></span>
                {{ option.label }}</span>
          </el-transfer>
        </div>
        <div>
          <div class="margintb20">产品统计</div>
          <el-transfer v-model="form.statisticsIds"
                       :titles="['可选择', '已选择']"
                       :data="statisticsList">
          </el-transfer>
        </div>
      </div>
    </el-form>
    <div class="xm-footer">
      <el-button type="info" size="mini" @click="close">关 闭</el-button>
      <el-button type="primary" size="mini" :loading="btn_loading" @click="saves('form')">保 存</el-button>
    </div>
  </section>
</template>

<script>
import {getStatistics, getAttributes } from '@/api/xapi'
import { addWhatResult,editWhatResult,
  getWhatResult
} from '@/api/monitor'
export default {
  props: {
    layerid: {
      default: 0
    },
    row: {
      default: {}
    },
    globalType:{
      default:2
    }
  },
  data() {
    return {
      box_loading: false,
      btn_loading: false,
      form: {
        name:'',//全局指标类名称
        global:'',//	1-全局，2-个人
        attributeIds:[],//	属性id集合
        statisticsIds:[],//统计类型名称
      },
      rules: {
        name: [{ required: true, message: '必填', trigger: 'blur' }],
      },
      statisticsList:[],
      attributesList:[]
    }
  },
  mounted() {
    this.form.global = this.globalType;
    if(this.row.id){
      this.form.name = this.row.name;
      this.form.id = this.row.id;
      this.getWhatResult();
    }
    this.getAttributes();//产品属性
    this.getStatistics();//产品统计
  },
  methods: {
    //根据监控id查询选取列表
    async getWhatResult(){
      const {status,data} = await getWhatResult(this.row.id);
      if(status == 200) {
        let attributeIds = [];
        data.selectedAttribute.map((item)=>{
          attributeIds.push(item.id);
        })
        this.form.attributeIds = attributeIds;

        let statisticsIds = [];
        data.selectedStatistics.map((item)=>{
          statisticsIds.push(item.id);
        })
        this.form.statisticsIds = statisticsIds;
        
      }
    },
    async getAttributes() {
      const res = await getAttributes({});
      if(res.status == 200){
        this.attributesList = res.data.map(item=>{
          var type = item.type == 1?'Control alarm':item.type == 2?'Tolerance alarm':'SCRAP';
          var obj={
            color:item.color,
            label:type,
            key:item.id,
          }
          return obj
        });
      }
    },
    async getStatistics() {
      const res = await getStatistics({});
      if(res.status == 200){
        this.statisticsList = res.data.map(item=>{
          switch (item.type){
            case 1:
              item.type='产品名';
              break;
            case 2:
              item.type='合格';
              break;
            case 3:
              item.type='不合格';
              break;
            case 4:
              item.type='总数';
              break;
            case 5:
              item.type='质量';
              break;
            case 6:
              item.type='报废';
              break;

          }
          var obj = {
            label:item.type,
            key:item.id
          }
          return obj
        })
      }
    },
    changeColor(e){
      this.form.color = e;
    },
    /* 添加、编辑 */
    saves(formName) {
        this.$refs[formName].validate(async valid => {
            if (valid) {
                var obj = JSON.parse(JSON.stringify(this.form));
              obj.attributeIds = obj.attributeIds.join(',')
              obj.statisticsIds = obj.statisticsIds.join(',')
              this.btn_loading = true;
                let res = ''
                if(this.row.id){
                     res = await editWhatResult(obj)
                }else{
                     res = await addWhatResult(obj)
                }
                this.btn_loading = false
               if (res.status && res.status != 200) return false
                Object.assign(this.$data.form, this.$options.data().form)
                this.$layer.close(this.layerid)
                // this.$parent.getList();
                this.$layer.close(this.$parent.layerid)
                this.$parent.$parent.getWhatResultsList()
              this.$message({ message: '操作成功', type: 'success' })
            } else {
                this.$refs[formName].validate()
            }
        })
    },
    close() {
      this.$layer.close(this.layerid)
    }
  }
}
</script>
<style lang="scss" scoped>
 .item_wrap{
   padding:20px;
   background: #F7F7F7;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border: 1px solid rgba(227, 227, 227, 100);
   margin-bottom: 15px;
 }
</style>
<style lang="scss">
.home_addEdit{
  .el-input__inner{
    width: 400px;
  }
  .el-transfer-panel{
    width:178px;
  }
  .el-transfer__buttons{
    padding:0 15px;
  }
}
</style>
